<template>
  <el-table ref="tableRef" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" width="120" />
    <el-table-column label="Operations">
      <template #default="scope">
        {{ scope.$index }}
        <img style="width: 180px; height: 180px" :src='`https://picsum.photos/seed/${scope.$index}/200/200`'>
      </template>
    </el-table-column>
  </el-table>
  <div class="bottom-target" style="height:60px" v-loading="true">阿松大</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
interface arrInterface {
  date: string,
  name: string,
  address: string
}
let tableData = ref<arrInterface[]>([])
for (let i = 0; i < 20; i++) {
  tableData.value.push({
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No. 189, Grove St, Los Angeles'
  });
}

const intersectionObserver = new IntersectionObserver((entries) => {
  entries.forEach((item) => {
    //item 为 IntersectionObserverEntry对像
    // isIntersecting是一个Boolean值，判断目标元素当前是否可见
    if (item.isIntersecting) {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop)
      for (let i = 0; i < 20; i++) {
        tableData.value.push({
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No. 189, Grove St, Los Angeles'
        });
      }
      scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      // intersectionObserver.unobserve(item.target); //停止监听该div DOM节点
      // 恢复滚动位置
      console.log(scrollTop)
      nextTick(() => {
        window.scrollTo(0, scrollTop);
      })
    }
  }
  );
});

// 开始监听
// 遍历监听所有div DOM节点
onMounted(() => {
  let tableItem = document.querySelectorAll('.bottom-target')
  tableItem.forEach((div) => intersectionObserver.observe(div));
})
</script>